<template>
  <div class="course-content-list">
    <!-- 下拉刷新组件 -->
    <van-pull-refresh
    v-model="isRefreshing"
    @refresh="onRefresh">
      <!-- 列表组件 -->
      <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad">
      <van-cell v-for="item in list" :key="item.id"
      @click="$router.push({
        name: 'course-info',
        params: {
          courseId: item.id
        }
      })">
      <!-- 课程左侧的图片 -->
        <div>
          <!-- 所有课程与已购课程的图片的属性名不同 判断后使用 -->
          <img :src="item.courseImgUrl || item.image" alt="">
        </div>
        <!-- 课程右边的信息 -->
        <div class="course-info">
          <!-- 所有课程与已购课程的图片的属性名不同 判断后使用 -->
          <h3 v-text="item.courseName || item.name"></h3>
          <p class="course-preview" v-html="item.previewFirstField"></p>
          <!-- 如果是已购课程无需显示价格区域 -->
          <p class="price-container" v-if="item.price">
            <span class="course-discount">￥{{ item.discounts }}</span>
            <s class="course-price">￥{{ item.price }}</s>
          </p>
        </div>
      </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
// import { getQueryCourses } from '@/services/course'
import { PullRefresh, List, Cell, Toast } from 'vant'
export default {
  name: 'courseContentList',
  components: {
    VanPullRefresh: PullRefresh,
    VanList: List,
    VanCell: Cell
  },
  props: {
    // 请求数据的函数
    fetchData: {
      type: Function,
      required: true
    }
  },
  data () {
    return {
      // 存储数据
      list: [],
      // 列表数据是否处于加载中
      loading: false,
      // 是否加载完毕
      finished: false,
      // 数据页数
      currentPage: 1,
      // 下拉刷新状态
      isRefreshing: false
    }
  },
  methods: {
    async onLoad () {
      const { data } = await this.fetchData({
        currentPage: this.currentPage,
        pageSize: 10,
        // 上架课程
        status: 1
      })
      // console.log(data)
      if (data.data && data.data.records && data.data.records.length) {
        this.list.push(...data.data.records)
      } else if (data.content && data.content.length !== 0) {
        this.list.push(...data.content)
      }
      // 下次请求下一页
      this.currentPage++
      // 加载状态结束
      this.loading = false
      // 如果数据全部加载完毕
      if (data.data && data.data.records && data.data.records.length < 10) {
        this.finished = true
      } else if (data.content && data.content.length < 10) {
        this.finished = true
      }
    },
    async onRefresh () {
      // 让加载数据页数为1 第一页
      this.currentPage = 1
      // 重新发送请求
      const { data } = await this.fetchData({
        currentPage: this.currentPage,
        pageSize: 10,
        // 上架的课程
        status: 1
      })
      // console.log(data)
      // 清空之前的列表刷新的课程数据，并对列表重新赋值
      if (data.data && data.data.records && data.data.records.length !== 0) {
        this.list = data.data.records
      } else if (data.content && data.content.length !== 0) {
        this.list = data.content
      }
      // 关闭下拉提示框
      this.isRefreshing = false
      // 提示
      Toast('刷新成功')
    }
  }
}
</script>

<style lang="scss" scoped>
// 列表组件的固定滚动设置
.course-content-list{
  position: fixed;
  overflow-y: auto;
  top: 0px;
  bottom: 0px;
  left: 0;
  right: 0;
}
// 列表项目的样式
.van-cell__value{
  display: flex;
  height: 100px;
  padding: 10px 0;
}
.van-cell__value img{
  height: 100px;
  width: 100px;
  border-radius: 5px;
}
.course-info{
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 5px;
}
p,h3{
  margin: 0;
}
.course-info .course-preview{
  flex-grow: 1;
}
.course-info .course-discount{
  color: #FF7452;
  margin-right: 5px;
}
</style>
